import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

Rectangle {
    width: 400
    height: 300
    color: "white"

    // 属性定义
    property int selectedRow: -1
    property int hoveredRow: -1
    readonly property int columnWidth: width / 3
    readonly property int rowHeight: 40
    
    // 颜色定义
    readonly property color headerColor: "#4CAF50"
    readonly property color selectedColor: "#C8E6C9"
    readonly property color hoverColor: "#E8F5E9"
    readonly property color editingColor: "#B2DFDB"
    readonly property color borderColor: "#e0e0e0"

    // 编辑状态
    property bool isEditing: false
    property int editingRow: -1
    property int editingColumn: -1

    TableModel {
        id: tableModel
        TableModelColumn { display: "product" }
        TableModelColumn { display: "price" }
        TableModelColumn { display: "stock" }

        rows: [
            { product: "笔记本电脑", price: "6999", stock: "15" },
            { product: "手机", price: "3999", stock: "25" },
            { product: "平板电脑", price: "4599", stock: "10" },
            { product: "智能手表", price: "1999", stock: "30" }
        ]
    }

    // 表头
    Rectangle {
        id: header
        width: parent.width
        height: rowHeight
        color: headerColor

        Row {
            anchors.fill: parent
            Repeater {
                model: ["产品", "价格 (可编辑)", "库存 (可编辑)"]
                Rectangle {
                    width: columnWidth
                    height: parent.height
                    color: "transparent"
                    Text {
                        anchors.centerIn: parent
                        text: modelData
                        color: "white"
                        font.bold: true
                    }
                }
            }
        }
    }

    // 表格内容
    TableView {
        id: tableView
        anchors {
            top: header.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        clip: true
        model: tableModel
        columnSpacing: 1
        rowSpacing: 1

        delegate: Rectangle {
            implicitWidth: columnWidth
            implicitHeight: rowHeight
            color: (row === editingRow && column === editingColumn) ? editingColor :
                   row === selectedRow ? selectedColor : 
                   row === hoveredRow ? hoverColor : 
                   row % 2 ? "#f5f5f5" : "white"

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    selectedRow = row
                    if (column > 0) { // 只允许编辑价格和库存列
                        editingRow = row
                        editingColumn = column
                        textInput.text = display
                        textInput.visible = true
                        textInput.focus = true
                    }
                }
                onEntered: hoveredRow = row
                onExited: hoveredRow = -1
            }

            Rectangle {
                width: parent.width
                height: 1
                color: borderColor
                anchors.bottom: parent.bottom
            }

            Text {
                id: displayText
                anchors.centerIn: parent
                text: column === 1 ? "¥" + display : display
                color: column === 1 ? "#E91E63" : "#333333"
                visible: !(row === editingRow && column === editingColumn)
            }

            TextField {
                id: textInput
                anchors.fill: parent
                anchors.margins: 2
                visible: row === editingRow && column === editingColumn
                text: display
                selectByMouse: true
                horizontalAlignment: TextInput.AlignHCenter
                verticalAlignment: TextInput.AlignVCenter

                onAccepted: {
                    let newRows = [...tableModel.rows]
                    if (column === 1) { // 价格列
                        if (/^\d+$/.test(text)) {
                            newRows[row].price = text
                            tableModel.rows = newRows
                        }
                    } else if (column === 2) { // 库存列
                        if (/^\d+$/.test(text)) {
                            newRows[row].stock = text
                            tableModel.rows = newRows
                        }
                    }
                    visible = false
                    editingRow = -1
                    editingColumn = -1
                }

                onFocusChanged: {
                    if (!focus) {
                        visible = false
                        editingRow = -1
                        editingColumn = -1
                    }
                }

                // 只允许输入数字
                validator: IntValidator {
                    bottom: 0
                    top: 999999
                }
            }
        }
    }

    // 编辑提示
    Text {
        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 5
        }
        text: "点击价格或库存单元格进行编辑"
        color: "#666666"
        font.pixelSize: 12
        horizontalAlignment: Text.AlignHCenter
    }
} 